<style lang="scss" scoped>

.camera{
  width: 54px;
  height: 44px;

  &:active{
    background-color: #ededed;
  }
}
.user-box{
  background-color: #fff;
}

</style>
<template>
  <view>

    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
      <view class="u-m-r-10 p-t-15 p-r-10">
        <u-avatar :src="userInfo.headimg||pic" size="140"></u-avatar>
      </view>
      <view class="u-flex-1">
        <view class="u-font-16 u-p-b-20">{{ userInfo.nickname }}</view>
        <view class="u-font-14 u-tips-color" @click="toPointIndex">积分:{{ userInfo.points_num }}</view>
      </view>
      <view class="u-m-l-10 u-p-10">
<!--        <u-icon name="scan" color="#969799" size="28"></u-icon>-->
      </view>
      <view class="u-m-l-10 u-p-10">
        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
      </view>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item @click="$linkTo('/pages/points/shop')" icon="rmb-circle" title="积分商城"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item @click="$linkTo('/pages/address/list')" icon="star" title="收货地址"></u-cell-item>
        <u-cell-item @click="$linkTo('/pages/poster/index')" icon="photo" title="海报"></u-cell-item>
<!--        <u-cell-item icon="coupon" title="卡券"></u-cell-item>-->
        <u-cell-item @click="$linkTo('/pages/common/page?name=about')" icon="heart" title="关于我们"></u-cell-item>
      </u-cell-group>
    </view>

    <view class="u-m-t-20">
      <u-cell-group>
        <u-cell-item @click="$linkTo('/pages/user/profile')" icon="setting" title="设置"></u-cell-item>
      </u-cell-group>
    </view>
  </view>

</template>

<script>
import { fetch } from '@/common/request'
import { error, hideLoading, linkToEasy, showLoading } from '@/common/fun'
import LayoutCellGroup from '@/components/layout-cell-group/layout-cell-group'
import LayoutCell from '@/components/layout-cell/layout-cell'
import LayoutIcon from '@/components/layout-icon/layout-icon'
import LayoutModal from '@/components/layout-modal/layout-modal'
import { changeHeadimg, changeNickname, changePhone, logout } from '@/api/user'
import { mapActions } from 'vuex'
import { pageMixin } from '@/mixins'
import { checkIsLogin, chooseImageByPromise, uploadImages } from '@/common/helper'
import store from '@/store'
import UNavbar from '@/uview-ui/components/u-navbar/u-navbar'
import UAvatar from '@/uview-ui/components/u-avatar/u-avatar'
import UIcon from '@/uview-ui/components/u-icon/u-icon'
import UCellGroup from '@/uview-ui/components/u-cell-group/u-cell-group'
import UCellItem from '@/uview-ui/components/u-cell-item/u-cell-item'
import { flashUserInfo } from '@/api'
export default {
  mixins: [pageMixin],
  components: {
    UCellItem,
    UCellGroup,
    UIcon,
    UAvatar,
    UNavbar,
    LayoutModal,
    LayoutIcon,
    LayoutCell,
    LayoutCellGroup
  },
  data () {
    return {
      pic: 'https://uviewui.com/common/logo.png',
      show: true,
      userInfo: {
        id: ''
      },
      showChangeNick: false,
      nickname: '',
      showChangePhone: false,
      phone: ''

    }
  },
  methods: {
    toPointIndex () {
      if (checkIsLogin(1, 1)) {
        linkToEasy('/pages/points/index')
      }
    },
    toLogin () {
      linkToEasy('/pages/login')
    },
    logoutFn () {
      uni.showModal({
        title: '提示',
        content: '是否退出登录',
        success: res => {
          if (res.confirm) {
            logout({}, { tip: 'loading' }).then(res => {
              this.userInfo = {
                id: ''
              }
              store.dispatch('user/setUserInfo', null)
              linkToEasy('/pages/home')

              // wx.removeStorageSync('userInfo')
              // wx.removeStorageSync('cookie')
              // getApp().globalData.userInfo = null
              //
              // wx.switchTab({
              //   url: '/pages/home'
              // })
            }).catch(() => {
            })
          }
        }
      })
    },
    modalChangePhone () {
      this.showChangePhone = 1
    },
    onCloseChangePhone () {
      this.showChangePhone = 0
    },
    inputPhoneChange (e) {
      this.phone = e.detail
    },
    async funcChangePhone () {
      if (!this.phone) {
        error('手机号码不为空')
        return
      }
      if (this.phone === this.userInfo.phone) {
        error('新旧号码一致')
      }

      await changePhone({ phone: this.phone }).then(res => {
        this.userInfo.phone = this.phone
        this.setUserInfo(this.userInfo)
      }).catch(err => {
        error(err.msg || '绑定手机号失败')
      })
      this.$closePop('changePhone')
    },
    inputNickChange (e) {
      this.nickname = e.detail
    },
    modalChangeNick () {
      this.showChangeNick = 1
    },
    onCloseChangeNick () {
      this.showChangeNick = 0
    },
    async funcChangeNick () {
      if (!this.nickname) {
        error('昵称不为空')
        return
      }
      if (this.nickname === this.userInfo.nickname) {
        error('新旧昵称一致')
      }

      changeNickname({ nickname: this.nickname }).then(res => {
        this.userInfo.nickname = this.nickname
        this.setUserInfo(this.userInfo)
      }).catch(err => {
        error(err.msg || '设置昵称失败')
      })

      this.$closePop('changeNickname')
    },
    async changeHeadimg () {
      const { path, size } = await chooseImageByPromise().then(res => res[0]).catch(err => { throw Error(err.errMsg) })
      console.log(size)
      if (size > 1024 * 2) {
        error('请上传小于2M的照片')
        return
      }
      const oss_url = await uploadImages({ imgs: [path] }).then(res => res[0]).catch(err => { throw err })
      changeHeadimg({ headimg: oss_url }).then(res => {
        this.userInfo.headimg = oss_url
        this.setUserInfo(this.userInfo)
      }).catch(err => {
        error(err.msg || '修改头像失败')
      })
    },
    onGotUserInfo (e) {
      console.log(e.detail.errMsg)
      console.log(e.detail.userInfo)
      console.log(e.detail.rawData)
    },
    ...mapActions({
      setUserInfo: 'user/setUserInfo'
    })
  },
  onPullDownRefresh () {
    if (checkIsLogin(0, 0)) {
      // 刷新信息
      showLoading('刷新信息')
      fetch('/user/info').then(res => {
        console.log(res)
        this.userInfo = res.data
        hideLoading()
      }).catch(e => {
        hideLoading()
      })
    }
  },
  onShow () {
    if (checkIsLogin(0, 0)) {
      // 刷新信息
      flashUserInfo().then(res => {
        console.log(res)
        this.userInfo = res.data
      }).catch(e => {

      })
    }
  },
  onLoad () {

  }

}

</script>
